<template>
  <div class="friends-container">
    <div class="header">
      <el-button type="primary" @click="goToAddFriend">添加好友</el-button>
    </div>
    <el-table :data="friends" style="width: 100%" class="slide-in">
      <el-table-column label="好友">
        <template #default="scope">
          <div class="friend-item">
            <el-avatar :src="scope.row.avatar || defaultAvatar" size="large" />
            <div class="friend-info">
              <span class="username">{{ scope.row.username }}</span>
              <el-tag :type="scope.row.status === 'online' ? 'success' : 'info'">
                {{ scope.row.status === 'online' ? '在线' : '离线' }}
              </el-tag>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="goToChat(scope.row.id)">聊天</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import axios from 'axios';
import { API_BASE_URL } from '@/config';
import { useRouter } from 'vue-router';
import { ElMessage } from 'element-plus';
import { defaultAvatar } from '@/assets/defaultAvatar';

interface Friend {
  id: string;
  username: string;
  avatar?: string;
  status: 'online' | 'offline';
}

const router = useRouter();
const friends = ref<Friend[]>([]);

const getFriends = async () => {
  try {
    const userId = localStorage.getItem('userId');
    const response = await axios.get(`${API_BASE_URL}/${userId}/friends`);
    friends.value = response.data;
  } catch (error: any) {
    ElMessage.error(error.response?.data?.message || '获取好友列表失败');
  }
};

const goToAddFriend = () => {
  router.push('/add-friend');
};

const goToChat = (friendId: string) => {
  router.push(`/chat/${friendId}`);
};

onMounted(() => {
  getFriends();
});
</script>

<style scoped>
.friends-container {
  padding: 20px;
  width: 100%;
  box-sizing: border-box;
}

.header {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 20px;
}

.friend-item {
  display: flex;
  align-items: center;
  gap: 15px;
  padding: 20px;
}

.friend-info {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.username {
  font-size: 1.1em;
  font-weight: bold;
}
</style> 